<template>
   <el-container class="layout-container-demo" style="height: 100vh">
      <el-aside width="auto">
         <el-scrollbar>
            <div style="width: 100%;text-align: center;padding:4.5px 0px;">
               <img class="logo"
                  src="https://img1.baidu.com/it/u=2003850994,4264889223&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=526"
                  alt="">
            </div>
            <el-menu background-color="#082b41" text-color="#fff" active-text-color="#ffd04b" 
             :default-active="defaultActive"
               class="el-menu-vertical-demo" :collapse="isCollapse" 
               @select="handleMenuSelect"
               @click="handleclick"  @open="handleOpen" @close="handleClose">
               <template v-for="(item, index) in menuData">
                  <template v-if="item.isTre">
                     <el-sub-menu :index="item.path">
                        <template #title><el-icon color="#409efc" class="icon" :class="item.icon"> </el-icon>
                           <span>{{ item.title }}</span></template>
                        <template v-for="(child1, index1) in item.children">
                           <el-menu-item :index="child1.path" :route="item.path">{{ child1.title }}</el-menu-item>
                        </template>
                     </el-sub-menu>
                  </template>
                  <template v-else>
                     <el-menu-item :index="item.path" :route="item.path">
                        <el-icon color="#409efc" class="icon" :class="item.icon"> </el-icon>
                        <template #title>{{ item.title }}</template>
                     </el-menu-item>
                  </template>
               </template>

            </el-menu>
         </el-scrollbar>
      </el-aside>

      <el-container>
         <el-header style="font-size: 12px;display: flex;border-bottom: 1px solid #e4e4e4;">
            <div class="menushow">
               <span class="icon" @click="isCollapse = !isCollapse"
                  :class="isCollapse ? 'icon-caidanzhedie1' : 'icon-caidanzhedie'"></span>
            </div>
            <div class="breadcrumb">
               <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item>系统</el-breadcrumb-item>
                  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                  <el-breadcrumb-item>用户添加</el-breadcrumb-item>

               </el-breadcrumb>
            </div>
            <div class="toolbar">

               <el-dropdown>
                  <el-icon style="margin-right: 8px; margin-top: 1px">
                     <setting />
                  </el-icon>
                  <template #dropdown>
                     <el-dropdown-menu>
                        <el-dropdown-item>View</el-dropdown-item>
                        <el-dropdown-item>Add</el-dropdown-item>
                        <el-dropdown-item>Delete</el-dropdown-item>
                     </el-dropdown-menu>
                  </template>
               </el-dropdown>
               <span>Tom</span>
            </div>
         </el-header>

         <el-main>
            <el-scrollbar >
               <router-view></router-view>
            </el-scrollbar>
         </el-main>
      </el-container>
   </el-container>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watchEffect } from 'vue'
import { useRoute,useRouter  } from 'vue-router';
const router  = useRouter();
const routerMenu  = useRoute();
const topasth = () => {
   router.push('/');
}
const system = ref("")
const defaultActive = ref(null)
const isCollapse = ref(false)
const handleclick = (key) => {
   // console.log(router)
   // console.log(key,'激活')
   // router.push("/")
   // router.push({name: keyPath[0]});
}
// 处理菜单项点击事件
const handleMenuSelect = (index) => {
   // console.log(index)
  // 点击菜单项时进行路由跳转
  router.push(index);
  // 更新当前激活的菜单项
  defaultActive.value = index;
  // 关闭菜单栏
  localStorage.setItem("defaultActive", index);
};
const handleOpen = (key: string, keyPath: string[]) => {
   // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
   // console.log(key, keyPath)
}

watchEffect(() => {
   console.log(router,'009')
})

// 在组件内部调用
const menuData = ref([])
onMounted(() => {
   // system.value = routerMenu.matched[0].path
   menuData.value = routerMenu.matched[0].children
   // defaultActive.value = localStorage.getItem("defaultActive") || system.value+"/equip"
   // defaultActive.value = localStorage.getItem("defaultActive") || system.value+"/equip"

})
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
   min-height: 400px;
}

.menushow {
   padding: 15px 10px 15px 0px;

   .icon {
      cursor: pointer;
      font-size: 20px;
   }
}

.breadcrumb {
   flex: 1%;
   padding: 22px 10px;
}

.layout-container-demo .el-header {
   position: relative;
   background-color: #fff;
   color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
   color: var(--el-text-color-primary);
   background: #082b41;
}

.layout-container-demo .el-menu {
   border-right: none;
}

.layout-container-demo .el-main {
   padding: 0;
   height: 100%;
}

.layout-container-demo .toolbar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   right: 20px;
}

.logo {
   width: 45px;
   height: 45px;
}
</style>